<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    const app = Vue.createApp({
        data(){
            return {
                message: 'hello world'
            }
        },
        methods:{
            eat(){
                console.log("我喜欢西瓜",this);
            }
        },
        template:`
          <div @click="eat">{{message}}</div>
          <my-comp :data="message"></my-comp>
        `
    });
    app.component('my-comp',{
        // 数据
        props: ['data'],
        // 模板
        template:`<div style="width:600px;height:200px;background:red;text-align:center">{{data}}</div>`,
        // 行为方法
        methods: {
            sleep() {
                alert('my-comp sleeping...')
            }
        },
        // 钩子函数(生命周期函数)
        mounted() {
            console.log("my-comp 被挂载了")
        }
    });
    // vm 代表的就是vue应用的根组件,在实例中访问的this指向挂载的根节点vm
    console.log(app);
    const vm = app.mount("#app")
    console.log(vm);
</script>
</body>
</html>